<template>
  <div class="demo-input">
    <cv-input></cv-input>
    <h4>状态</h4>
    <cv-input
      v-model="state.text"
      v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
      :key="item"
      :status="item"
      style="margin-right: 8px"
    ></cv-input>
    <h4>类型提示</h4>
    <cv-input ref="myInput"></cv-input>
    <button @click="outerClear">outer clear</button>
    <button @click="outerFocus">outer focus</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "@vue/runtime-core";
import { Input } from "src";

export default defineComponent({
  name: "demo-input",
  setup() {
    const inputRef = Input.use.ref("myInput");
    const state = reactive({
      text:"hello world"
    });

    return {
      state,
      outerClear: () => {
        inputRef.value!.methods.clear();
      },
      outerFocus: () => {
        inputRef.value!.methods.focus(false);
      }
    };
  }
});
</script>

<style></style>
